import { useMemo, useState } from 'react';
import { InbizIcon } from '@inbiz/utils';
import { Tag } from 'antd-mobile';
import { getMessage, TextWidget } from '@inbiz/react';

interface IRegionProps {
  title: string;
  showicon?: boolean;
  tagList: string[];
  indexLibraryName?: string;
  deleteTag?: (tagName: string, index: number) => void;
  deleteAllTag?: () => void;
  clickTag?: (tagName: string) => void;
}
const Region = (props: IRegionProps) => {
  const { title, tagList, showicon, deleteTag, deleteAllTag, clickTag, indexLibraryName } = props;
  const [showItemDel, setShowItemDel] = useState<boolean>(false);
  const delClick = () => {
    setShowItemDel(true);
  };
  const doneClick = () => {
    setShowItemDel(false);
  };

  return (
    <div className="inbiz-search-engine-wap-region">
      <div className="inbiz-region-header">
        <span className="inbiz-region-title">{title}</span>
        {showicon &&
          tagList?.length > 0 &&
          (!showItemDel ? (
            <span className="inbiz-region-del-icon" onClick={delClick}>
              <InbizIcon type="icon-ic-tree-huishouzhan" />
            </span>
          ) : (
            <div className="inbiz-region-header-right">
              <span onClick={deleteAllTag && deleteAllTag}>
                <TextWidget>SearchEngine.deleteAll</TextWidget>
              </span>
              <span className="inbiz-region-cut-line"></span>
              <span className="inbiz-region-done" onClick={doneClick}>
                <TextWidget>SearchEngine.complete</TextWidget>
              </span>
            </div>
          ))}
      </div>
      <div className="inbiz-region-content">
        {tagList.map((tag, index) => {
          return (
            <Tag
              key={tag + '_' + index + '_' + indexLibraryName}
              onClick={() => clickTag && clickTag(tag)}
            >
              <span className="tagContent">{tag}</span>
              {showicon && showItemDel && (
                <>
                  <span className="inbiz-region-cut-line"></span>
                  <span
                    onClick={(e) => {
                      e.stopPropagation();
                      deleteTag && deleteTag(tag, index);
                    }}
                  >
                    <InbizIcon type="icon-ic-close-bold" />
                  </span>
                </>
              )}
            </Tag>
          );
        })}
      </div>
    </div>
  );
};

export default Region;
